import React, { useState, useEffect } from 'react';
import { setup_list, manage_list, other_list, course_list } from '../../api/niu';
import "./HeatClassification.scss";

interface Props { }
interface DataType {
    tittle: string,
    data: any,
    icon: string
}

function HeatClassification(props: Props) {
    // 数据源
    var [setupData, setSetupData] = useState<DataType[]>([])
    var [manageData, setManageData] = useState<DataType[]>([])
    var [otherData, setOtherData] = useState<DataType[]>([])
    var [courseData, setCourseData] = useState<DataType[]>([])

    var setuplist = async () => {
        var res = await setup_list();
        console.log(res.data)
        setSetupData(res.data);
    }
    var managelist = async () => {
        var res = await manage_list();
        console.log(res.data)
        setManageData(res.data);
    }
    var otherlist = async () => {
        var res = await other_list();
        console.log(res.data)
        setOtherData(res.data);
    }
    var courselist = async () => {
        var res = await course_list();
        console.log(res.data)
        setCourseData(res.data);
    }
    useEffect(() => {
        setuplist();
        managelist();
        otherlist();
        courselist();
    }, [])

    return (
        <div className='heatClassification'>
            {/* 热度分类 */}
            {
                setupData.map((item, index) => {
                    return (
                        <div className="heatBox" key={index}>
                            <h2>{item.tittle}</h2>
                            <div className='heatBox-setupBox'>
                                {
                                    item.data.map((item2: any, index2: any) => {
                                        return (
                                            <div className="heatBox-setup" key={index2}>
                                                <div className='heatBox-setup-tittle'>{item2.ch_tittle}</div>
                                                <div className='heatBox-setupBox-item'>
                                                    {
                                                        item2.ch_data.map((item3: any, index3: any) => {
                                                            return (
                                                                <div className="heatBox-setupBox-itemBox" key={index3}>
                                                                    <div className="heatBox-setupBox-item" >{item3.item}</div>
                                                                </div>
                                                            )
                                                        })
                                                    }
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    )
                })
            }
            {
                manageData.map((item, index) => {
                    return (
                        <div className="heatBox" key={index}>
                            <h2>{item.tittle}</h2>
                            <div className='heatBox-setupBox'>
                                {
                                    item.data.map((item2: any, index2: any) => {
                                        return (
                                            <div className="heatBox-setup" key={index2}>
                                                <div className='heatBox-setup-tittle'>{item2.ch_tittle}</div>
                                                <div className='heatBox-setupBox-item'>
                                                    {
                                                        item2.ch_data.map((item3: any, index3: any) => {
                                                            return (
                                                                <div className="heatBox-setupBox-itemBox" key={index3}>
                                                                    <div className="heatBox-setupBox-item" >{item3.item}</div>
                                                                </div>
                                                            )
                                                        })
                                                    }
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    )
                })
            }
            {
                otherData.map((item, index) => {
                    return (
                        <div className="heatBox" key={index}>
                            <h2>{item.tittle}</h2>
                            <div className='heatBox-setupBox'>
                                {
                                    item.data.map((item2: any, index2: any) => {
                                        return (
                                            <div className="heatBox-setup" key={index2}>
                                                <div className='heatBox-setup-tittle'>{item2.ch_tittle}</div>
                                                <div className='heatBox-setupBox-item'>
                                                    {
                                                        item2.ch_data.map((item3: any, index3: any) => {
                                                            return (
                                                                <div className="heatBox-setupBox-itemBox" key={index3}>
                                                                    <div className="heatBox-setupBox-item" >{item3.item}</div>
                                                                </div>
                                                            )
                                                        })
                                                    }
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    )
                })
            }
            {
                courseData.map((item, index) => {
                    return (
                        <div className="heatBox" key={index}>
                            <h2>{item.tittle}</h2>
                            <div className='heatBox-setupBox'>
                                {
                                    item.data.map((item2: any, index2: any) => {
                                        return (
                                            <div className="heatBox-setup" key={index2}>
                                                <div className='heatBox-setup-tittle'>{item2.ch_tittle}</div>
                                                <div className='heatBox-setupBox-item'>
                                                    {
                                                        item2.ch_data.map((item3: any, index3: any) => {
                                                            return (
                                                                <div className="heatBox-setupBox-itemBox" key={index3}>
                                                                    <div className="heatBox-setupBox-item" >{item3.item}</div>
                                                                </div>
                                                            )
                                                        })
                                                    }
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    )
                })
            }
        </div>
    );
}

export default HeatClassification;